import React from "react";
import WrapFormItem from "components/wrap-form-item";
import { Col, Row, Select } from "antd";
import Searcher from "components/searcher";
import { messages } from "share/common";
const Option = Select.Option;
import symbolOption from './symbol-option'

const hasValue = value => value && value.symbol && value.values && value.values.length > 0;

export default {
  id: 'RECEIPT_LABEL', label: messages('financial-management.key915')/*发票标签*/,
  initialValue: { symbol: 'IN' },
  component: <WrapFormItem parser={value => value || { symbol: 'IN' }}>
    {(onChange, value) => (
      <Row gutter={10}>
        <Col span={10}>
          <Select
            style={{ width: '100%' }}
            onChange={innerValue => onChange(innerValue, 'symbol')}
            value={value.symbol}
            placeholder={messages('common.please.select')}
          >
            {symbolOption.map(item => <Option key={item.key}>{item.label}</Option>)}
          </Select>
        </Col>
        <Col span={14}>
          <Searcher
            type='labels'
            labelKey='name'
            listExtraParams={{ labelcaterogy: 'RECEIPT', page: 0, size: 999 }}
            descriptionKey='description'
            onChange={innerValue => onChange(innerValue, 'values')}
            value={value.values}
          />
        </Col>
      </Row>
    )}
  </WrapFormItem>,
  hasValue,
  parser: value => hasValue(value) ? {
    'RECEIPT_LABEL': {
      symbol: value.symbol,
      values: value.values.map(item => item.type)
    }
  } : null,
  tagParser: value =>
    `${symbolOption.find(item => item.key === value.symbol).label}: ` +
    `${value.values.map(item => item.name).join('、')}`,
  JSONFormatter: value => JSON.stringify({
    symbol: value.symbol,
    values: value.values.map(item => ({ name: item.name, type: item.type }))
  })
}
